<!-- 月交易额 -->
<template>
  <div class="monthValue">
    <h3>月交易额统计</h3>
    <div ref="reasonBox" style="width:100%;height:100%;"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getTransactionByDays } from "@/api/home";
export default {
  name: "monthValue",
  data() {
    return {
      chartData: [],
      chartInstance: null
    };
  },
  mounted() {
    this.initChart();
    this.getTransactionByDays();
  },
  watch: {
    chartData: {
      handler() {
        if (this.chartInstance) {
          this.chartInstance.dispose();
        }
        this.initChart();
      },
      deep: true
    }
  },
  methods: {
    getTransactionByDays() {
      getTransactionByDays({}).then(res => {
        this.chartData = res.data;
      });
    },
    initChart() {
      this.chartInstance = echarts.init(this.$refs.reasonBox, "macarons");
      const option = {
        color: ["#85abff"],
        // tooltip: {
        //   trigger: 'item'
        // },
        xAxis: {
          type: "category",
          data: this.chartData.map(item => item.date),
          axisLine: {
            show: false // 设置为 false 可以隐藏 X 轴的轴线
          },
          axisTick: { show: false },
          axisLabel: {
            color: "#bdbec4"
          }
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false // 设置为 false 可以隐藏 X 轴的轴线
          },
          axisTick: { show: false },
          axisLabel: {
            color: "#bdbec4"
          }
        },
        series: [
          {
            data: this.chartData.map(item => item.transCount),
            type: "line",
            smooth: true
          }
        ],
        grid: {
          top: 20,
          bottom: 20,
          left: 20,
          right: 20,
          containLabel: true
        }
      };

      if (option && typeof option === "object") {
        this.chartInstance.setOption(option);
      }
    }
  }
};
</script>

<style lang="scss">
.monthValue {
  display: grid;
  grid-template-rows: 30px 1fr;
  height: 100%;
  background: #fff;
  border-radius: 5px;
  padding: 20px 15px;
}
</style>
